<template>
  <div class="dy-main BringForwardSearchBank">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">收款银行</x-header>
    </div>
  <div class="dy-body">
    <div class="dy-wapper">
      <search
      placeholder="输入银行"
      @result-click="resultClick"
      @on-change="getResult"
      :results="results"
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      top="46px"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search"></search>
    <scroller lock-x use-pullup @on-pullup-loading="loadMore" ref="scroller">
    <p>{{returnData}}</p>
    <ul class="list" v-for="(item, key) in returnData" :key="key">
      <li @click="getInfo(item, key)"><img src="../../../static/icon/me.svg" alt=""><span>{{item.bankName}}</span><i class="selected" v-if="selectIt === key"></i></li>
    </ul>
    </scroller>
    </div>
  </div>
  <div class="dy-footer"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectIt: '', // 点击展示图标
      results: [],
      value: '',
      returnData: [], // 返回查询数据
      clickBank: '' // 点击选择的数据
    }
  },
  mounted () {
    this.getPayBank()
  },
  methods: {
    getInfo (module, index) {
      this.selectIt = index
      this.clickBank = module.bankName
      this.setInfoToVuex()
      // this.back()
    },
    back () {
      this.$publicFun.goBack(this)
    },
    setInfoToVuex () { // 将信息保存到状态管理
      // 添加信息状态管理
      let lBringForwardInfo = {
        getBank: this.clickBank // 收款银行
      }
      this.$store.commit('setBringForwardInfo', lBringForwardInfo) // 将数据保存到状态管理
    },
    getPayBank () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'querySuperNetSilverBank', 'basic_Data': JSON.stringify({'cardNo': '88596867675855'})}
        }),
        (response) => {
          // alert(response)
          this.returnData = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.returnData = rep.body.arrays
          } else {
            this.returnData = '服务器链接已断开'
          }
        })
    }
  }
}
</script>
<style scoped lang="less">
.BringForwardSearchBank{
  .fot28{
    font-size: .28rem;
  }
  .list{
    width: 100%;
    img{
      vertical-align: middle;
      margin-right: .22rem;
    }
    &>li{
      width: 100%;
      line-height: 1rem;
      border-bottom: 1px solid #bdbdbd;
      padding-left: .28rem;
      font-size: .32rem;
      color: #9b9b9b;
      background: #fff;
      overflow: hidden;
      .selected{
        float: right;
        background: #F28300;
        width: .36rem;
        height: .36rem;
        margin: .32rem .28rem;
      }
    }
  }
}
</style>
